<!-- Drag handler -->
<div class="flex-row task-drag-handler"></div>

<!-- Checkbox -->
<div class="flex-row task-check">
  <span nz-checkbox [(nzChecked)]="checked" [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="onAllChecked($event)"></span>
</div>

<!-- Subtask arrow -->
<div class="flex-row task-arrow"></div>

<!-- Task name -->
<div class="flex-row task-name">Task</div>

<!-- Description -->
<ng-container>
  <div class="flex-row task-description">Description</div>
</ng-container>

<!-- Labels -->
<ng-container>
  <div class="flex-row task-labels">Labels</div>
</ng-container>

<!-- Phase -->
<ng-container>
  <div class="flex-row task-phase d-flex justify-content-between align-items-center">
    <span nz-tooltip [nzTooltipTitle]="phaseLabel">{{phaseLabel | ellipsis : 10}}</span>
    <button *ngIf="auth.isOwnerOrAdmin()" [nzShape]="'circle'" [nzSize]="'small'" [nzType]="'text'"
            (click)="onPhaseSettingsClick()" nz-button>
      <span nz-icon [nzType]="'setting'" [nzTheme]="'outline'"></span>
    </button>
  </div>
</ng-container>

<!-- Status -->
<ng-container>
  <div class="flex-row task-status">Status</div>
</ng-container>

<!-- Priority -->
<ng-container>
  <div class="flex-row task-priority">Priority</div>
</ng-container>

<!-- Estimation -->
<ng-container>
  <div class="flex-row task-estimation justify-content-center">Estimation</div>
</ng-container>

<!-- Start date -->
<!--<ng-container>-->
<!--  <div class="flex-row task-start-date">Start Date</div>-->
<!--</ng-container>-->

<!-- Due date -->
<!--<ng-container>-->
<!--  <div class="flex-row task-due-date">Due Date</div>-->
<!--</ng-container>-->
